<template>
  <div class="grid-wrap">
    <div class="m-grids">
      <a href="./mobile-style.html" class="m-grid">
        <div class="grid_icon" :style="`background-image: url(${require('../assets/img/jizhi.png')})`"></div>
        <p class="grid_label">移动端样式集合</p>
      </a>
      <a href="./desktop.html" class="m-grid">
        <div class="grid_icon" :style="`background-image: url(${require('../assets/img/jizhi.png')})`"></div>
        <p class="grid_label">PC端综合案例</p>
      </a>
      <a href="" class="m-grid">
        <div class="grid_icon" :style="`background-image: url(${require('../assets/img/jizhi.png')})`">
          <!-- <img src="../assets/jizhi.png" alt=""> -->
        </div>
        <p class="grid_label">AAAAA</p>
      </a>
      <a href="" class="m-grid">
        <div class="grid_icon" :style="`background-image: url(${require('../assets/img/jizhi.png')})`">
          <!-- <img src="../assets/jizhi.png" alt=""> -->
        </div>
        <p class="grid_label">AAAAA</p>
      </a>
      <a href="" class="m-grid">
        <div class="grid_icon" :style="`background-image: url(${require('../assets/img/jizhi.png')})`">
        </div>
        <p class="grid_label">AAAAA</p>
      </a>
      <a href="" class="m-grid">
        <div class="grid_icon" :style="`background-image: url(${require('../assets/img/jizhi.png')})`">
        </div>
        <p class="grid_label">AAAAA</p>
      </a>
    </div>  
  </div>
</template>

<script>
export default {

}
</script>

<style scope  lang="stylus">
@import '../styles/mixins'
@import '../styles/tools/m-grid.styl'

.grid-wrap
  width: 100%
  .m-grid
    gird-column-ctrl(4)
@media screen and (max-width:320px)
  .grid-wrap .m-grid
    gird-column-ctrl(3)
@media screen and (min-width:321px) and (max-width:374px)
  .grid-wrap .m-grid
    gird-column-ctrl(3)
@media screen and (min-width:375px) and (max-width:414px)
  .grid-wrap .m-grid
    gird-column-ctrl(4)
@media screen and (min-width:415px) // and (max-width:639px)
  .grid-wrap .m-grid
    gird-column-ctrl(5)
</style>
